<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="zh-cn">
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="厚和尚品" />
<meta name="keywords" content="厚和尚品" />
<title>待付款的订单</title>
<link rel="apple-touch-icon-precomposed" href="" />
<link rel="apple-touch-startup-image" href="" />
<link rel="stylesheet" href="mall/css/css.css"
	th:href="@{/mall/css/css.css}" />
	<link rel="stylesheet" href="mall/lib/layer/layer_mobile/need/layer.css"
	th:href="@{/mall/lib/layer/layer_mobile/need/layer.css}" />
    <script type="text/javascript" src="mall/lib/zpeto/zepto-1.2.0.min.js"
	th:src="@{/mall/lib/zpeto/zepto-1.2.0.min.js}"></script>
<script type="text/javascript"
	src="mall/lib/layer/layer_mobile/layer.js"
	th:src="@{/mall/lib/layer/layer_mobile/layer.js}"></script>
<script type="text/javascript" src="mall/js/comm.js"
	th:src="@{/mall/js/comm.js}"></script>
<script type="text/javascript" src="mall/js/pingpp.js"
	th:src="@{/mall/js/pingpp.js}"></script>
</head>
<body>
	<div class="order-address">
		<div class="box-hd" th:if="${mbAddrInfo != null}">
			<div class="content" data-flag="1">
				<div class="info">
					<span th:text="|收货人：${mbAddrInfo.name}|">收货人：赵琳</span> <span
						class="tel" th:text="${mbAddrInfo.phoneNo}">18947885674</span>
				</div>
				<div class="detail" th:text="${mbAddrInfo.fullAddress}">淄博高新区西五路先进陶瓷创新园A座新商机电子商务有限公司6号仓库</div>
			</div>
			<div class="arrow">
				<img th:src="@{/mall/img/ico-arrow-right.png}" alt="" />
			</div>
		</div>
		<div class="box-bd" th:if="${mbAddrInfo == null}"
			onclick="window.location.href='/member/addaddress'">
			<div class="ico-plus">
				<img th:src="@{/mall/img/ico-plus-01.png}" alt="" />
			</div>
			<div class="txt">新增收货地址</div>
			<div class="arrow">
				<img th:src="@{/mall/img/ico-arrow-right.png}" alt="" />
			</div>
		</div>
	</div>
	<div class="order-order">
		<header>
			<img th:src="@{/mall/img/ico-home-01.png}" alt="" />
			<div class="name">厚和尚品</div>
		</header>
		<div class="item" th:each="itemInfo : ${itemList}">
			<div class="goods-img">
				<img
					th:src="@{'/upload-dir/'+${itemInfo.productId}+'/min/' + ${itemInfo.smallImgPath}}"
					alt="" />
			</div>
			<div class="content">
				<p class="title" th:text="${itemInfo.proName}">老风农天然450g喝出健康</p>
				<div class="item-pay">
					<div class="price">
						<span class="ftx-01" th:text="${itemInfo.transBonus}">200</span>积分+￥<span
							class="ftx-01" th:text="${itemInfo.transAmt}">59</span>
					</div>
					<div class="quantity" th:text="|× ${itemInfo.count}|">1</div>
				</div>
			</div>

		</div>
		<div class="single-row delivery">
			<label class="title">配送方式</label>
			<div class="cnt">
				<span>免运费</span><span>快递发货</span>
			</div>
		</div>
		<div style="margin: 0 .3rem;">
			<div class="seperator-wrap">
				<hr class="seperator" />
			</div>
		</div>
		<form id="cartform" method="post" th:action="@{/member/dopay}">
		<div class="single-row seller">
			<label class="title">卖家留言</label>
			<div class="cnt">
			
				<input type="text" name="remark" placeholder="点击给商家留言" />
	    		<input type="hidden" th:field="${orderInfo.transAmt}"/>
	    		<input type="hidden" th:field="${orderInfo.transBonus}"/>
	    		<input type="hidden" th:field="${orderInfo.memberId}"/>
	    		<input type="hidden" th:field="${mbAddrInfo.addrId}"/>
			</div>
		</div>
		<div style="margin: 0 .3rem;">
			<div class="seperator-wrap">
				<hr class="seperator" />
			</div>
		</div>
		<div class="single-row total">
			<label class="title">合计</label>
			<div class="cnt cell">
				<span th:text="|￥ ${orderInfo.transAmt}|">&yen;59</span>
				<span th:text="|${orderInfo.transBonus} 积分|">200</span>
			</div>
		</div>
		<div class="single-row">
			<label class="title">支付方式</label>
			<div class="cnt2">
				<span><input type="radio" name="payChannel" value="wx"/>微信</span>
				<span><input type="radio" name="payChannel" value="ali"/>支付宝</span>
			</div>
		</div>
		</form>
		<div class="seperator-wrap">
			<hr class="seperator" />
		</div>
	</div>
	<div class="bottom-fxied"
		style="left: 0px; bottom: 0px; width: 100%; display: block;">
		
		<div class="total-wrap">
			<div class="real-pay mui-flex align-center">
				合计:<span class="cell" style="text-align:right;"><p th:text="|￥${orderInfo.transAmt}|">150</p><p th:text="|${orderInfo.transBonus} 积分|">$234</p></span>
			</div>
			<div class="btn" ontouchend="commit();">提交订单</div>
		</div>
	</div>
	
	<script type="text/javascript">
			function commit(){
				var itemcount = $(".box-hd .content").attr("data-flag");
				var paychannel =$("input[name='payChannel']:checked").val();
				if(typeof(paychannel) == 'undefined'){
					layer.open({
						content : '请选择支付方式！',
						skin : 'msg',
						time : 2
					//2秒后自动关闭
					});
					return;
				}
				if(itemcount !=1){
					layer.open({
						content : '请先填写收货地址！',
						skin : 'msg',
						time : 2
					//2秒后自动关闭
					});
				}else{
					$.ajax({
						type:"POST",
						dataType:"json",
						url:"/member/dopay",
						data:$('#cartform').serialize(),
						success:function(rst){
							if(typeof(rst.result) == 'undefined'){
								pingpp.createPayment(rst, function(result, err){
								    console.log(result);
								    console.log(err.msg);
								    console.log(err.extra);
								    if (result == "success") {
								        // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
								    } else if (result == "fail") {
								        // charge 不正确或者微信公众账号支付失败时会在此处返回
								    } else if (result == "cancel") {
								        // 微信公众账号支付取消支付
								    }
								});
							}
							if(rst.result == 'success2'){
								window.location.href = rst.msg;
							}
							if(rst.result == 'fail'){
								layer.open({
									content : rst.msg,
									skin : 'msg',
									time : 2
								//2秒后自动关闭
								});
								return;
							}
							
						},
						error : function(XMLHttpRequest,textStatus,errorThrown){
							layer.open({
								content : '系统异常',
								skin : 'msg',
								time : 2
							//2秒后自动关闭
							});
						}
					});
				}
				
			}
		</script>
</body>
</html>